<template>
  <ul class="list">
    <li v-for="item in arr" :key="item.id" @click="gotoDetails(item.id)">
      <section>
        <img :src="imgBaseUrl+item.coverImg" alt="" />
        <div class="bottom-box">
          <h3>{{item.name}}</h3>
          <p>{{item.coin}}</p>
          <div class="btn">立即兑换</div>
          <img class="flag"  src="../../assets/img/section_hot.png" alt="">
        </div>
      </section>
    </li>

  </ul>
</template>

<script>
export default {
    props:["arr"],
  data() {
    return {};
  },
  methods:{
    gotoDetails(id){
      this.$router.push(`/details?id=${id}`)
    }
  }

};
</script>
 
<style lang = "less" scoped>
.list {
  /* overflow: hidden; */
  display: flex;
  /* 自动换行 */
  flex-wrap: wrap;
  /* 中间间距处理 */
  justify-content: space-between;
  li {
    width: 285px;
    float: left;
    margin-bottom: 20px;
    position: relative;
   
    section {
      width: 285px;
      height: 492px;
      position: relative;
      transition: all 0.5s linear;
    }
    .bottom-box {
      width: 285px;
      height: 162px;
      background-color: #fff;
      text-align: center;
      h3 {
        font-size: 18px;
        font-family: SourceHanSansSC;
        font-weight: 300;
        color: #333333;
        height: 56px;
        line-height: 56px;
      }
      p {
        font-size: 18px;
        font-family: SourceHanSansSC;
        font-weight: bold;
        color: #fd604d;
      }
      .btn {
        width: 100px;
        height: 36px;
        line-height: 36px;
        border: 1px solid #0a328e;
        font-size: 18px;
        font-family: SourceHanSansSC;
        font-weight: 300;
        color: #0a328e;
        margin: 20px auto 0;
        cursor: pointer;
      }
    }
     .flag{
        position: absolute;
        top: 0;
        left: 0;
    }
   &:hover {
    cursor: pointer;
    section {
      margin-top: -15px;
      box-shadow: 0 0 10px #ccc;
      .btn {
      background-color: #0a328e;
      color: #fff;
        }
    }
    
  }
  }
  
 
}

</style>